<wicket:extend>
	<div class="card">
		<div class="card-body">
			<div class="d-flex align-items-center mb-4">
				<div class="clearable-wrapper flex-grow-1 mr-3">
					<input wicket:id="filterRoles" class="form-control search" placeholder="Filter roles...">
				</div>
				<a wicket:id="addNew" class="btn btn-icon btn-primary flex-shrink-0"><wicket:svg href="plus" class="icon"></wicket:svg></a>
			</div>
			<table wicket:id="roles" class="roles table table-hover"></table>
		</div>
	</div>
	<wicket:fragment wicket:id="nameFrag">
		<a wicket:id="link"><span wicket:id="label"></span></a>
	</wicket:fragment>
	<wicket:fragment wicket:id="actionFrag">
		<a wicket:id="delete" class="btn btn-xs btn-icon btn-light btn-hover-danger" title="Delete this role"><wicket:svg href="trash" class="icon align-middle"></wicket:svg></a>
	</wicket:fragment>
</wicket:extend>
